<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_图片插入</title>
</head>
<body>
    <!--右键选中.html文件 "open in" "Exploer"-->
    <!--相对路径:从当前要插入资源的html出发,去找目标
    1)目标与html在同一级目录:直接写目标全名!
    2)目标在html的兄弟/子目录下:先写目录名,再写兄弟/子目录里的目标
    3)目标在html的上层目录:先写../回到上级,再写目标 -->
    <img src="1.png" alt="">
    <img src="img/3.png" alt="">
    <img src="../2.png" alt="这是一张课程图">
    <!-- alt用来设置图片无法成功加载时的预设替换文字   -->
    <img src="abc" alt="哎呀,图片被超哥偷走了">
    <hr>
    <!-- width设置图片宽度 height设置图片高度
    图片失真:图片的宽高比例不对 压缩或拉伸了
    图片本身是有大小和宽高比的,可以只设置宽高其中的一个属性,另外一个会跟着改-->
    <img src="img/zly.jpeg" width="200" height="200">
    <img src="img/zly.jpeg" width="200">
    <img src="img/zly.jpeg" height="200">

    <!-- 绝对路径 右键 复制图片地址    -->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///f93f25fba0a84f72be47f5058f84a655.png" alt="">
</body>
</html>